From 172be399a7ce2b4440580128d443251557ef7ca3 Mon Sep 17 00:00:00 2001 From: Avnesh Shakya Date: Mon, 16 Oct 2017 16:24:21 +0530 Subject: [PATCH 1/7] Newport templates with customized style --- ui/components/_index.scss | 15 + ui/components/checkbox/newport/_index.scss | 48 ++ ui/components/checkbox/newport/example.jsx | 244 ++++++++ ui/components/combobox/newport/_index.scss | 29 + ui/components/combobox/newport/example.jsx | 553 ++++++++++++++++++ ui/components/datepickers/newport/_index.scss | 36 ++ ui/components/datepickers/newport/example.jsx | 476 +++++++++++++++ .../datetime-picker/newport/_index.scss | 11 + .../datetime-picker/newport/example.jsx | 238 ++++++++ .../file-selector/newport/_index.scss | 98 ++++ .../file-selector/newport/example.jsx | 205 +++++++ .../form-element/newport/_index.scss | 15 + .../form-element/newport/example.jsx | 197 +++++++ ui/components/form-layout/newport/_index.scss | 19 + ui/components/form-layout/newport/example.jsx | 59 ++ ui/components/input/newport/_index.scss | 70 +++ ui/components/input/newport/example.jsx | 10 +- ui/components/lookups/newport/_index.scss | 41 ++ ui/components/lookups/newport/example.jsx | 126 ++++ ui/components/modals/newport/_index.scss | 24 + ui/components/modals/newport/example.jsx | 313 ++++++++++ ui/components/picklist/newport/_index.scss | 46 ++ ui/components/picklist/newport/example.jsx | 215 +++++++ .../progress-bar/newport/_index.scss | 23 + .../progress-bar/newport/example.jsx | 63 ++ .../progress-ring/newport/_index.scss | 48 ++ .../progress-ring/newport/example.jsx | 43 ++ ui/components/progress-ring/newport/index.jsx | 63 ++ ui/components/publishers/newport/_index.scss | 18 + ui/components/publishers/newport/example.jsx | 81 +++ ui/components/select/newport/_index.scss | 61 ++ ui/components/select/newport/example.jsx | 163 ++++++ ui/components/textarea/newport/_index.scss | 34 ++ ui/components/textarea/newport/example.jsx | 128 ++++ ui/components/timepicker/newport/_index.scss | 55 ++ ui/components/timepicker/newport/example.jsx | 160 +++++ 36 files changed, 4023 insertions(+), 5 deletions(-) create mode 100644 ui/components/checkbox/newport/_index.scss create mode 100644 ui/components/checkbox/newport/example.jsx create mode 100644 ui/components/combobox/newport/_index.scss create mode 100644 ui/components/combobox/newport/example.jsx create mode 100644 ui/components/datepickers/newport/_index.scss create mode 100644 ui/components/datepickers/newport/example.jsx create mode 100644 ui/components/datetime-picker/newport/_index.scss create mode 100644 ui/components/datetime-picker/newport/example.jsx create mode 100644 ui/components/file-selector/newport/_index.scss create mode 100644 ui/components/file-selector/newport/example.jsx create mode 100644 ui/components/form-element/newport/_index.scss create mode 100644 ui/components/form-element/newport/example.jsx create mode 100644 ui/components/form-layout/newport/_index.scss create mode 100644 ui/components/form-layout/newport/example.jsx create mode 100644 ui/components/lookups/newport/_index.scss create mode 100644 ui/components/lookups/newport/example.jsx create mode 100644 ui/components/modals/newport/_index.scss create mode 100644 ui/components/modals/newport/example.jsx create mode 100644 ui/components/picklist/newport/_index.scss create mode 100644 ui/components/picklist/newport/example.jsx create mode 100644 ui/components/progress-bar/newport/_index.scss create mode 100644 ui/components/progress-bar/newport/example.jsx create mode 100644 ui/components/progress-ring/newport/_index.scss create mode 100644 ui/components/progress-ring/newport/example.jsx create mode 100644 ui/components/progress-ring/newport/index.jsx create mode 100644 ui/components/publishers/newport/_index.scss create mode 100644 ui/components/publishers/newport/example.jsx create mode 100644 ui/components/select/newport/_index.scss create mode 100644 ui/components/select/newport/example.jsx create mode 100644 ui/components/textarea/newport/_index.scss create mode 100644 ui/components/textarea/newport/example.jsx create mode 100644 ui/components/timepicker/newport/_index.scss create mode 100644 ui/components/timepicker/newport/example.jsx diff --git a/ui/components/_index.scss b/ui/components/_index.scss index d24c318457..77464938ac 100644 --- a/ui/components/_index.scss +++ b/ui/components/_index.scss @@ -47,23 +47,29 @@ // Forms 'form-element/base/index', + 'form-element/newport/index', 'input/base/index', 'input/newport/index', 'textarea/base/index', + 'textarea/newport/index', 'radio-group/base/index', 'radio-button-group/base/index', 'checkbox/base/index', + 'checkbox/newport/index', 'checkbox-toggle/base/index', 'checkbox-button/base/index', 'checkbox-button-group/base/index', 'select/base/index', + 'select/newport/index', 'form-layout/base/index', + 'form-layout/newport/index', 'form-layout/compound/index', 'docked-form-footer/base/index', 'slider/base/index', // File selector 'file-selector/base/index', + 'file-selector/newport/index', // Page Headers 'page-headers/base/index', @@ -91,18 +97,22 @@ // Picklist 'picklist/base/index', + 'picklist/newport/index', // Combobox 'combobox/doc', 'combobox/base/index', + 'combobox/newport/index', // Dueling Picklist 'dueling-picklist/base/index', // Datepicker 'datepickers/base/index', + 'datepickers/newport/index', 'datepickers/range/index', 'timepicker/base/index', + 'timepicker/newport/index', // Docked Composer 'docked-composer/base/index', @@ -121,6 +131,7 @@ // Publishers 'publishers/base/index', + 'publishers/newport/index', 'publishers/comment/index', // Discussion Feed @@ -131,6 +142,7 @@ // Modal 'modals/base/index', + 'modals/newport/index', // App Launcher 'app-launcher/base/index', @@ -149,8 +161,10 @@ // Progress Indicator 'progress-bar/base/index', + 'progress-bar/newport/index', 'progress-indicator/base/index', 'progress-ring/base/index', + 'progress-ring/newport/index', // Rich Text Editor 'rich-text-editor/base/index', @@ -185,6 +199,7 @@ // Lookup 'lookups/base/index', + 'lookups/newport/index', // Images 'avatar/base/index', diff --git a/ui/components/checkbox/newport/_index.scss b/ui/components/checkbox/newport/_index.scss new file mode 100644 index 0000000000..e3a4203740 --- /dev/null +++ b/ui/components/checkbox/newport/_index.scss @@ -0,0 +1,48 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded checkbox + * + * @name newport + * @selector .vlocity-newport-checkbox + * @restrict .slds-checkbox + * @variant + */ +.vlocity-newport-checkbox { + [type=checkbox] { + &:checked+.slds-checkbox--faux, + &:checked+.slds-checkbox__label .slds-checkbox--faux, + &:checked+.slds-checkbox__label .slds-checkbox_faux, + &:checked+.slds-checkbox_faux, + &:checked~.slds-checkbox--faux, + &:checked~.slds-checkbox_faux, { + background: #FF6D00; + border: none; + outline: unset; + &:after { + height: .4rem; + width: .7rem; + border-bottom: 2px solid #FFF; + border-left: 2px solid #FFF; + } + } + } +} + +.slds-has-error .vlocity-newport-checkbox { + [type=checkbox] { + &:checked+.slds-checkbox--faux, + &:checked+.slds-checkbox__label .slds-checkbox--faux, + &:checked+.slds-checkbox__label .slds-checkbox_faux, + &:checked+.slds-checkbox_faux, + &:checked~.slds-checkbox--faux, + &:checked~.slds-checkbox_faux { + border-color: #FFF; + background-color: #c23934; + &:after { + border-color: #fff; + } + } + } +} \ No newline at end of file diff --git a/ui/components/checkbox/newport/example.jsx b/ui/components/checkbox/newport/example.jsx new file mode 100644 index 0000000000..5da21f0ad0 --- /dev/null +++ b/ui/components/checkbox/newport/example.jsx @@ -0,0 +1,244 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; +import _ from '../../../shared/helpers'; + +/// //////////////////////////////////////// +// Partial(s) +/// //////////////////////////////////////// + +let Demo = props => ( +
+ {props.children} +
+); + +let Fieldset = props => ( +
+ {props.children} +
+); + +let Legend = props => ( + + {props.children} + +); + +let FormElement = props => ( +
+ {props.children} +
+); + +let FormElementLabel = props => ( + +); + +let FormElementControl = props => ( +
+ {props.children} +
+); + +export let NewportCheckbox = props => { + const uniqueId = _.uniqueId('checkbox-'); + + return ( + + {props.children} + + + + ); +}; + +/// /////////////////////////////////////////// +// State Constructor(s) +/// /////////////////////////////////////////// + +let Indeterminate = props => ( + + + + + +); + +let Required = props => ( + + + + + * + + + + +); + +let ErrorState = props => ( + + + + + * + + + +
+ This field is required +
+ +); + +let Disabled = props => ( + + + + + +); + +let Group = props => ( +
+ Checkbox Group Label + + + + +
+); + +let GroupRequired = props => ( +
+ + + * + {' '} + Checkbox Group Label + + + + + +
+); + +let GroupError = props => ( +
+ + + * + {' '} + Checkbox Group Label + + + + + +
+ This field is required +
+
+); + +let GroupDisabled = props => ( +
+ Checkbox Group Label + + + + +
+); + +/// /////////////////////////////////////////// +// Export +/// /////////////////////////////////////////// + +export default ( + + + + + +); + +export let states = [ + { + id: 'indeterminate', + label: 'Indeterminate', + element: , + script: ` + var checkbox = document.getElementById('checkbox-indeterminate-01') + checkbox.indeterminate = true + ` + }, + { + id: 'required', + label: 'Required', + element: + }, + { + id: 'error', + label: 'Error', + element: + }, + { + id: 'disabled', + label: 'Disabled', + element: + } +]; + +export let examples = [ + { + id: 'group', + label: 'Group', + element: + }, + { + id: 'group-required', + label: 'Group Required', + element: + }, + { + id: 'group-error', + label: 'Group with error', + element: + }, + { + id: 'group-disabled', + label: 'Group Disabled', + element: + } +]; diff --git a/ui/components/combobox/newport/_index.scss b/ui/components/combobox/newport/_index.scss new file mode 100644 index 0000000000..59cab76e12 --- /dev/null +++ b/ui/components/combobox/newport/_index.scss @@ -0,0 +1,29 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded Container for slds combobox + * + * @name newport + * @selector .vlocity-newport-combobox_container + * @restrict .slds-combobox_container + * @variant + */ + +// .vlocity-newport-combobox_container { + +// } + +/** + * @summary Vlocity Newport branded combobox input + * + * @name newport + * @selector .vlocity-newport-combobox + * @restrict .slds-combobox + * @variant + */ +// .vlocity-newport-combobox { + +// } + diff --git a/ui/components/combobox/newport/example.jsx b/ui/components/combobox/newport/example.jsx new file mode 100644 index 0000000000..d37a3b9545 --- /dev/null +++ b/ui/components/combobox/newport/example.jsx @@ -0,0 +1,553 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import { ListboxPill } from '../../pills/listbox-of-pill-options/example'; +import { ButtonIcon } from '../../button-icons/base/example'; +import { Avatar } from '../../avatar/base/example'; +import { FormElement } from '../../form-element/base/example'; +import { NewportInput } from '../../input/newport/example'; +import { StandardIcon } from '../../icons/standard/example'; +import { UtilityIcon } from '../../icons/base/example'; +import { SpinnerContainer, Spinner } from '../../spinners/base/example'; +import SvgIcon from '../../../shared/svg-icon'; +import classNames from 'classnames'; +import _ from '../../../shared/helpers'; + +/* ----------------------------------------------------------------------------- + Variables +----------------------------------------------------------------------------- */ + +const listboxId = 'listbox-unique-id'; +const listboxSelectionsId = 'listbox-selections-unique-id'; +const comboboxId = 'combobox-unique-id'; +const listboxOptionId01 = 'listbox-option-unique-id-01'; +const listboxOptionId02 = 'listbox-option-unique-id-02'; + +/** +* Generic Listbox container +* @name Listbox +* @prop {string} id - Unique ID of listbox, targetted by the combobox container +* @prop {string} className - A CSS class for the outer element +* @prop {boolean} vertical - Vertical Orientation +* @prop {boolean} horizontal - Horizontal Orientation +* @prop {boolean} inline - Horizontal Orientation but inlined with adjacent elements +* @prop {string} aria-label - +*/ +export let Listbox = props => ( +
+
    + {props.children} +
+
+); + +/** +* Generic list item within a listbox +* @name ListboxItem +* @prop {string} className - A CSS class for the outer element +*/ +export let ListboxItem = props => ( +
  • + {props.children} +
    • +); + +/** +* Generic listbox option within a listbox +* @name ListboxItemOption +* @prop {string} className - A CSS class for the outer element +*/ +export let ListboxOption = props => ( + + {props.children} + +); + +/** +* Combobox container for text input, text input icons, listbox of options, +* listbox of pill options and object switcher. +* @name ComboboxContainer +* @prop {string} id +* @prop {string} className - A CSS class for the element containing the input +* @prop {string} containerClassName - A CSS class for the element containing the input and listbox +* @prop {string} formClassName - A CSS class for the form element +* @prop {string} formControlClassName - A CSS class for the form element control +* @prop {boolean} isOpen +* @prop {boolean} selectedOptionsInline - Specifies that the listbox of pill options are displayed inlined to its adjacent elements +* @prop {boolean} objectSwitcherInline - Specifies that the object switcher is displayed inlined to its adjacent elements +* @prop {string} inputIcon - Specifies the position of an input icon +* @prop {string} inputIconLeftSprite +* @prop {string} inputIconLeftSymbol +* @prop {string} inputIconRightSymbol +* @prop {boolean} inputButtonIcon +* @prop {string} value +* @prop {boolean} autocomplete +* @prop {boolean} readonly +* @prop {string} tabIndex +* @prop {string} aria-controls +* @prop {boolean} hideLabel +* @prop {string} placeholder +*/ +export let ComboboxContainer = props => ( +
    + + {/* Form Element Control */} +
    + {/* Combobox container */} +
    + {/* Search icon before the listbox of selected items */} + {props.inputIcon === 'left' && props.selectedOptionsInline ? ( + + ) : null} + {/* Show object switcher here */} + {props.objectSwitcher ? : null} + {/* If inline listbox - Show selected options here */} + {props.selectedOptionsInline ? props.children : null} + {/* Combobox - role=combobox */} +
    +
    + {/* + If inputIcon is on both sides of input AND a standard sprite, + Makes autocomplete single selection look like a pill + */} + {props.inputIcon === 'both' && + props.inputIconLeftSprite === 'standard' ? ( + + ) : props.inputIcon === 'left' || props.inputIcon === 'both' ? ( + + ) : null} + {/* Input */} + + {/* If inputIcon is right, show icon here */} + {props.inputIcon === 'right' && props.inputButtonIcon != true ? ( + + ) : null} + {/* If loading, show buttonIcon and spinner here */} + {props.loading ? ( +
    + + +
    + ) : null} + {/* If close button, show buttonIcon here */} + {props.inputButtonIcon && props.inputIconRightSymbol === 'close' ? ( + + ) : null} +
    + {/* Pass listbox into combobox here */} + {props.listbox} +
    +
    + {/* If NOT inline listbox - Show selected options here */} + {!props.selectedOptionsInline ? props.children : null} +
    +
    +); + +/** +* An entity option is a type of listbox option, it contains a standard icon, +* a result name and an optional second line of text that sits below the result name +* @name EntityOption +* @prop {string} id +* @prop {string} className +* @prop {boolean} selected +* @prop {boolean} focused +* @prop {boolean} entityMeta - A secondary line of additional information below the result name +* @prop {string} entityType - Type of entity, such as account or lead +* @prop {string} entityTitle - Name of result +* @prop {string} entityLocation - Physical location of entity, such as 'San Francisco' +*/ +export let EntityOption = props => ( + + + + + + + {props.typeahead ? ( + props.children + ) : ( + props.entityTitle || 'Salesforce.com, Inc.' + )} + + {props.entityMeta ? ( + + {_.upperFirst(props.entityType) || 'Account'} •{' '} + {_.upperFirst(props.entityLocation) || ' San Francisco'} + + ) : null} + + +); + +/** +* A plain option is a type of listbox option, it contains a string of text and +* a tick mark to show an option has been selected +* @name Option +* @prop {string} id +* @prop {string} className +* @prop {boolean} selected +* @prop {boolean} focused +* @prop {string} title +*/ +export let Option = props => ( + + {!props.hideIcon ? ( + + + + ) : null} + + + {props.selected ? ( + Current Selection: + ) : null}{' '} + {props.title} + + + +); + +/** +* Object switcher is a popup menu button, its visually displayed inlined with +* its adjacent objects. A "polymorphic" combobox example uses this. +* @name ObjectSwitcher +* @prop {string} className +*/ +let ObjectSwitcher = props => ( +
    + +
    +); + +/* ----------------------------------------------------------------------------- + Private +----------------------------------------------------------------------------- */ + +const ListboxDropdown = props => ( + + + + + + + + +); + +/* ----------------------------------------------------------------------------- + Exports +----------------------------------------------------------------------------- */ + +// Default +export default ( +
    + } + /> +
    +); + +// States +export let states = [ + { + id: 'focused', + label: 'Focused', + element: ( +
    + } + /> +
    + ), + script: ` + document.getElementById('combobox-unique-id').focus() + ` + }, + { + id: 'open-item-focused', + label: 'Open - Item Focused', + element: ( +
    + } + aria-activedescendant={listboxOptionId01} + /> +
    + ) + }, + { + id: 'closed-options-selected', + label: 'Option(s) Selected', + element: ( +
    + } + > + + + + + + + + + + + + + + + + + +
    + ) + } +]; diff --git a/ui/components/datepickers/newport/_index.scss b/ui/components/datepickers/newport/_index.scss new file mode 100644 index 0000000000..1f0ce28f08 --- /dev/null +++ b/ui/components/datepickers/newport/_index.scss @@ -0,0 +1,36 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded datepicker + * + * @name newport + * @selector .vlocity-newport-datepicker + * @restrict .slds-datepicker + * @variant + */ + + +.vlocity-newport-datepicker { + td { + &.slds-is-selected:not(.slds-is-today) > .slds-day { + background: #FF6D00; + color: $color-text-button-brand-hover; + } + } + + .slds-text-link { + color: #FF6D00; + &:hover { + color: #FF6D00; + } + } +} + + +.vlocity-newport-dropdown-trigger { + .slds-input-has-icon_right .slds-input__icon { + left: 0; + } +} diff --git a/ui/components/datepickers/newport/example.jsx b/ui/components/datepickers/newport/example.jsx new file mode 100644 index 0000000000..c38b47a010 --- /dev/null +++ b/ui/components/datepickers/newport/example.jsx @@ -0,0 +1,476 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; +import { UtilityIcon } from '../../icons/base/example'; +import { ButtonIcon } from '../../button-icons/base/example'; +import { Select } from '../../select/base/example'; +import { FormElement } from '../../form-element/base/example'; +import { NewportInput } from '../../input/newport/example'; + +/* ----------------------------------------------------------------------------- + Variables +----------------------------------------------------------------------------- */ + +const dateInputId = 'date-input-id'; +const dateRangeInputId01 = 'date-input-id-01'; +const dateRangeInputId02 = 'date-input-id-02'; +const timeInputId = 'time-input-id'; + +/* ----------------------------------------------------------------------------- + Private +----------------------------------------------------------------------------- */ + +let DatepickerContainer = props => ( +
    + {props.children} + +
    +); + +let DatepickerHeader = props => ( +
    +
    +
    + +
    +

    + June +

    +
    + +
    +
    +
    + + +
    +
    +); + +let Weekdays = props => ( + + + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + + +); + +let Week = props => {props.children}; + +let Day = props => ( + + {props.children} + +); + +/* ----------------------------------------------------------------------------- + Public +----------------------------------------------------------------------------- */ + +export let NewportDatePicker = props => ( + + + + + + + + + + 31 + + + 1 + + 2 + 3 + 4 + 5 + 6 + + + 7 + 8 + 9 + 10 + 11 + 12 + 13 + + + 14 + 15 + 16 + 17 + + 18 + + 19 + 20 + + + 21 + 22 + 23 + + 24 + + + 25 + + + 26 + + + 27 + + + + + 28 + + + 29 + + + 30 + + + 1 + + + 2 + + + 3 + + + 4 + + + +
    +     +); + +/* ----------------------------------------------------------------------------- + Exports +----------------------------------------------------------------------------- */ + +export const Context = props => ( +
    {props.children}
    +); + +export default ( + } + > + + + +); + +export let states = [ + { + id: 'datepicker-day-selected', + label: 'Date selected', + element: ( + + } + > + + + + ) + } +]; diff --git a/ui/components/datetime-picker/newport/_index.scss b/ui/components/datetime-picker/newport/_index.scss new file mode 100644 index 0000000000..82579d2d7f --- /dev/null +++ b/ui/components/datetime-picker/newport/_index.scss @@ -0,0 +1,11 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded datetime picker + * + * @name newport + * @selector .vlocity-newport-datetime-picker + * @restrict .slds-datetime-picker + * @variant + */ \ No newline at end of file diff --git a/ui/components/datetime-picker/newport/example.jsx b/ui/components/datetime-picker/newport/example.jsx new file mode 100644 index 0000000000..2a4dc088bd --- /dev/null +++ b/ui/components/datetime-picker/newport/example.jsx @@ -0,0 +1,238 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import { + ComboboxContainer, + Listbox, + ListboxItem, + Option +} from '../../combobox/newport/example'; +import { DatePicker } from '../../datepickers/newport/example'; +import { UtilityIcon } from '../../icons/base/example'; +import { ButtonIcon } from '../../button-icons/base/example'; +import { FormElement } from '../../form-element/newport/example'; +import { NewportInput } from '../../input/newport/example'; + +/* ----------------------------------------------------------------------------- + Variables +----------------------------------------------------------------------------- */ + +const dateInputId = 'date-input-id'; +const timeInputId = 'time-input-id'; +const listboxOptionId01 = 'listbox-option-unique-id-01'; +const listboxOptionId02 = 'listbox-option-unique-id-02'; +const listboxOptionId03 = 'listbox-option-unique-id-03'; +const listboxOptionId04 = 'listbox-option-unique-id-04'; +const listboxOptionId05 = 'listbox-option-unique-id-05'; +const listboxOptionId06 = 'listbox-option-unique-id-06'; +const listboxOptionId07 = 'listbox-option-unique-id-07'; +const listboxOptionId08 = 'listbox-option-unique-id-08'; +const listboxOptionId09 = 'listbox-option-unique-id-09'; +const listboxOptionId10 = 'listbox-option-unique-id-10'; +const listboxOptionId11 = 'listbox-option-unique-id-11'; +const listboxOptionId12 = 'listbox-option-unique-id-12'; + +/* ----------------------------------------------------------------------------- + Private +----------------------------------------------------------------------------- */ + +const ListboxDropdown = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +/* ----------------------------------------------------------------------------- + Exports +----------------------------------------------------------------------------- */ + +// Demo wrapper +export const Context = props => ( +
    {props.children}
    +); + +// Default +export default ( +
    +
    + Date and Time +
    +
    + } + > + + + + } + /> +
    +
    +
    +
    +); + +export let states = [ + { + id: 'date-selection', + label: 'Date selected', + element: ( +
    +
    + Date and Time +
    +
    + + } + > + + + + } + /> +
    +
    +
    +
    + ) + }, + { + id: 'time-selection', + label: 'Time selected', + element: ( +
    +
    + Date and Time +
    +
    + + } + > + + + + } + /> +
    +
    +
    +
    + ) + } +]; diff --git a/ui/components/file-selector/newport/_index.scss b/ui/components/file-selector/newport/_index.scss new file mode 100644 index 0000000000..2c1ed11870 --- /dev/null +++ b/ui/components/file-selector/newport/_index.scss @@ -0,0 +1,98 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded file selecter + * + * @name newport + * @selector .vlocity-newport-file-selector + * @restrict .slds-file-selector + * @variant + */ + +.vlocity-newport-file-selector { + width: 15rem; + + .slds-file-selector__dropzone { + width: inherit; + padding: 0; + border: 1px solid #dddbda; + border-radius: .25rem; + background-color: #F8FBFE; + } + + .slds-file-selector__body, + .slds-file-selector__button { + width: 100%; + } + + .slds-file-selector__body { + position: relative; + height: inherit; + + .slds-file-selector__button { + height: inherit; + max-height: 2.3rem; + line-height: 2.3rem; + background-color: #F8FBFE; + border: none; + color: #54698D; + font-size: 0.75rem; + } + + span.vlocity-newport-file-icon { + position: absolute; + right: 0.5rem; + padding: 0.3rem; + border-radius: 0.25rem; + border: 1px solid #dddbda; + + svg.slds-button__icon { + fill: #54698D; + width: 1.2rem; + height: 1.2rem; + } + } + } + + .vlocity-newport-file-list { + margin: 0 0.5rem; + + li { + position: relative; + width: 100%; + height: 2.15rem; + margin: 0.5rem 0; + border: 1px solid #dddbda; + background-color: white; + border-radius: 0.25rem; + + .slds-button.slds-button_neutral { + border: none; + color: #061C3F; + font-size: 0.75rem; + } + } + + .slds-file-selector__button { + height: inherit; + max-height: 2rem; + } + + span.vlocity-newport-file-icon { + position: absolute; + right: 0.3rem; + padding: 0.4rem 0; + + svg.slds-button__icon { + fill: #54698D; + width: 1.2rem; + height: 1.2rem; + } + } + } +} + + + diff --git a/ui/components/file-selector/newport/example.jsx b/ui/components/file-selector/newport/example.jsx new file mode 100644 index 0000000000..57b5057ace --- /dev/null +++ b/ui/components/file-selector/newport/example.jsx @@ -0,0 +1,205 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import SvgIcon from '../../../shared/svg-icon'; +import classNames from 'classnames'; + +export let NewportFileSelector = props => ( +
    +
    +
    +
    + + +
    +
    +
    + + {props.error ? ( +
    + File type not supported +
    + ) : null} +
    +); + +export let NewportFileSelectorWithFiles = props => ( +
    +
    +
    +
    + + +
      +
    • + + peel-ux.png + + + + +
      • +
    • + + peel-ux.png + + + + +
      • +
    • + + peel-ux.png + + + + +
      • +
    +
    +
    +
    + + {props.error ? ( +
    + File type not supported +
    + ) : null} +
    +); + +export default ( + +); + +export let states = [ + { + id: 'file-selector-files-list', + label: 'Selected Files', + element: ( + + ) + }, + { + id: 'file-selector-files-error', + label: 'Error', + element: ( + + ) + }, + { + id: 'file-selector-files-draggover', + label: 'Dragover', + element: ( + + ) + }, + { + id: 'file-selector-files-draggover-error', + label: 'Dragover with error', + element: ( + + ) + } +]; diff --git a/ui/components/form-element/newport/_index.scss b/ui/components/form-element/newport/_index.scss new file mode 100644 index 0000000000..41bed595fd --- /dev/null +++ b/ui/components/form-element/newport/_index.scss @@ -0,0 +1,15 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded form element + * + * @name newport + * @selector .vlocity-newport-form-element + * @restrict .slds-form-element + * @variant + */ + +// .slds-form-element { + +// } \ No newline at end of file diff --git a/ui/components/form-element/newport/example.jsx b/ui/components/form-element/newport/example.jsx new file mode 100644 index 0000000000..92108ab58a --- /dev/null +++ b/ui/components/form-element/newport/example.jsx @@ -0,0 +1,197 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; +import SvgIcon from '../../../shared/svg-icon'; +import { NewportInput } from '../../input/newport/example'; +import { NewportTextarea } from '../../textarea/newport/example'; +import { NewportCheckbox } from '../../checkbox/newport/example'; +import { Radio } from '../../radio-group/base/example'; + +const inputLabel = 'Form Element Label'; +const inputId = 'input-unique-id'; +const errorId = 'error-message-unique-id'; + +export let FormElement = props => { + const { + className, + formControlClassName, + required, + label, + hideLabel, + inputId, + inputIcon, + errorId, + tooltip, + message, + role, + dropdown, + children, + ...rest + } = props; + + let inputIconPosition; + if (inputIcon === 'left') { + inputIconPosition = 'slds-input-has-icon slds-input-has-icon_left'; + } else if (inputIcon === 'right') { + inputIconPosition = 'slds-input-has-icon slds-input-has-icon_right'; + } else if (inputIcon === 'both') { + inputIconPosition = 'slds-input-has-icon slds-input-has-icon_left-right'; + } + + return ( +
    + {label ? ( + + ) : null} + {tooltip ? ( +
    + +
    + ) : null} +
    + {children} +
    + {message ? ( +
    + {message} +
    + ) : null} + {dropdown || null} +
    + ); +}; + +export default ( + + + +); + +export let states = [ + { + id: 'required', + label: 'Required', + element: ( + + + + ) + }, + { + id: 'error', + label: 'Error', + element: ( + + + + ) + } +]; + +export let examples = [ + { + id: 'input', + label: 'Input', + element: ( + + + + ) + }, + { + id: 'textarea', + label: 'Textarea', + element: ( + + + + ) + }, + { + id: 'checkbox', + label: 'Checkbox', + element: ( + + + + ) + }, + { + id: 'radio-group', + label: 'Radio Group', + element: ( +
    + + Form Element Label + +
    + + +
    +
    + ) + }, + { + id: 'inline-help', + label: 'Inline Help', + element: ( + + + + ) + }, + { + id: 'tooltip-help', + label: 'Tooltip Help', + element: ( + + + + ) + } +]; diff --git a/ui/components/form-layout/newport/_index.scss b/ui/components/form-layout/newport/_index.scss new file mode 100644 index 0000000000..358e1a4bab --- /dev/null +++ b/ui/components/form-layout/newport/_index.scss @@ -0,0 +1,19 @@ +/** + * @name base + * @selector .slds-form + * @restrict form, div, fieldset + * @variant + */ + +/** + * @summary Vlocity Newport branded form + * + * @name newport + * @selector .vlocity-newport-form + * @restrict .slds-form + * @variant + */ + +// .vlocity-newport-form { + +// } \ No newline at end of file diff --git a/ui/components/form-layout/newport/example.jsx b/ui/components/form-layout/newport/example.jsx new file mode 100644 index 0000000000..d8b8fd8703 --- /dev/null +++ b/ui/components/form-layout/newport/example.jsx @@ -0,0 +1,59 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; +import { FormElement } from '../../form-element/base/example'; +import { NewportInput } from '../../input/newport/example'; +import { NewportTextarea } from '../../textarea/newport/example'; +import { Radio } from '../../radio-group/base/example'; +import { NewportCheckbox } from '../../checkbox/newport/example'; + +const inputId01 = 'input-id-01'; +const inputId02 = 'input-id-02'; +const inputId03 = 'input-id-03'; + +let Form = props => ( +
    + + + + + + +
    + + Checkbox Group label + +
    + + +
    +
    +
    + + Checkbox Group label + +
    + + +
    +
    +
    +); + +export default
    ; + +export let states = [ + { + id: 'horizontal', + label: 'Horizontal', + element: + } +]; diff --git a/ui/components/input/newport/_index.scss b/ui/components/input/newport/_index.scss index 488f58036c..06f4c5f854 100644 --- a/ui/components/input/newport/_index.scss +++ b/ui/components/input/newport/_index.scss @@ -12,4 +12,74 @@ .vlocity-newport-input { border-radius: 0; border-width: 0 0 1px 0; + padding: 0; + + &:focus, + &:active { + outline: 0; + box-shadow: none; + } +} + + +.slds-has-error .vlocity-newport-input { + box-shadow: none; + &:focus, + &:active { + box-shadow: none; + } +} + + +/** + * @summary Vlocity Newport branded text input with icon + * + * @name newport + * @selector .vlocity-newport-input-has-icon + * @restrict .slds-input-has-icon + * @variant + */ + +.vlocity-newport-input-has-icon { + + /** + * Positions .slds-input__icon to the left of the text input + * + * @selector .vlocity-newport-input-has-icon_left + * @restrict .vlocity-newport-input-has-icon + */ + + &_left, + &--left { + .slds-input__icon { + #{$left}: $spacing-none; + } + + .slds-input, + .slds-input_bare, + .slds-input--bare { + padding-#{$left}: $spacing-large; + } + } + + + /** + * Positions .slds-input__icon to the right of the text input + * + * @selector .vlocity-newport-input-has-icon_right + * @restrict .vlocity-newport-input-has-icon + */ + + &_right, + &--right { + .slds-input__icon { + #{$right}: $spacing-none; + } + + .slds-input, + .slds-input_bare, + .slds-input--bare { + padding-#{$right}: $spacing-large; + } + } } diff --git a/ui/components/input/newport/example.jsx b/ui/components/input/newport/example.jsx index 2e78b63e31..4b2cfb24a2 100644 --- a/ui/components/input/newport/example.jsx +++ b/ui/components/input/newport/example.jsx @@ -103,7 +103,7 @@ let NewportErrorIcon = props => ( {' '} Input Label - + @@ -191,7 +191,7 @@ export let examples = [ element: ( Input Label - + Input Label - + Input Label - + Input Label - + ( + + + + + + + + +); + +/* ----------------------------------------------------------------------------- + Exports +----------------------------------------------------------------------------- */ + +// Demo wrapper +export const Context = props => ( +
    {props.children}
    +); + +// Default +export default ( + } + /> +); + +// States +export let states = [ + { + id: 'focused', + label: 'Focused', + element: ( + } + /> + ) + }, + { + id: 'open-item-focused', + label: 'Open - Item Focused', + element: ( + } + aria-activedescendant={listboxOptionId01} + /> + ) + }, + { + id: 'closed-option-selected', + label: 'Option Selected', + element: ( + } + /> + ) + } +]; diff --git a/ui/components/modals/newport/_index.scss b/ui/components/modals/newport/_index.scss new file mode 100644 index 0000000000..b2506025b4 --- /dev/null +++ b/ui/components/modals/newport/_index.scss @@ -0,0 +1,24 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded modal + * + * @name newport + * @selector .vlocity-newport-modal + * @restrict .slds-modal + * @variant + */ + +.vlocity-newport-modal { + .slds-modal__close { + left: unset; + right: -.5rem; + } + + .slds-text-heading--medium, + .slds-text-heading_medium { + font-size: 1.125rem; + color: #1564BF; + } +} \ No newline at end of file diff --git a/ui/components/modals/newport/example.jsx b/ui/components/modals/newport/example.jsx new file mode 100644 index 0000000000..9f2f351122 --- /dev/null +++ b/ui/components/modals/newport/example.jsx @@ -0,0 +1,313 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import { ButtonIcon } from '../../button-icons/base/example'; +import classNames from 'classnames'; + +/// /////////////////////////////////////////// +// Partial(s) +/// /////////////////////////////////////////// + +let Demo = props => ( +
    + {props.children} +
    +
    +); + +export let NewportModal = props => ( +
    +
    {props.children}
    +
    +); + +export let NewportModalHeader = props => ( +
    + {props.closeButton != 'false' ? ( + + ) : null} + {props.children} +
    +); + +export let NewportModalContent = props => ( +
    + {props.children} +
    +); + +export let NewportModalFooter = props => ( +
    + {props.children} +
    +); + +/// /////////////////////////////////////////// +// State Constructor(s) +/// /////////////////////////////////////////// + +let Taglines = props => ( + + + + +

    + Here’s a tagline if you need it. It is allowed to extend across + mulitple lines, so I’m making up content to show that to you. It + is allowed to{' '} + contain links or be a link. +

    +     + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     + + + + +     +     +); + +let Large = props => ( + + + + + + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     + + + + +     +     +); + +let Directional = props => ( + + + + + + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     + + + + +     +     +); + +let Headless = props => ( + + + + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     + + + + +     +     +); + +let Footless = props => ( + + + + + + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     +     +     +); + +/// /////////////////////////////////////////// +// Export +/// /////////////////////////////////////////// + +export default ( + + + + + + +

    + Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco + deserunt aute id consequat veniam incididunt duis in sint irure nisi. + Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor + esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna + exercitation reprehenderit magna. Tempor cupidatat consequat elit + dolor adipisicing. +

    +

    + Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit + officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident. + Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute + est. Labore esse esse cupidatat amet velit id elit consequat minim + ullamco mollit enim excepteur ea. +

    +     + + + + +     +     +); + +export let examples = [ + { + id: 'taglines', + label: 'Taglines', + element: + }, + { + id: 'headless', + label: 'Header empty', + element: + }, + { + id: 'footless', + label: 'Footer removed', + element: + } +]; diff --git a/ui/components/picklist/newport/_index.scss b/ui/components/picklist/newport/_index.scss new file mode 100644 index 0000000000..fee15928c7 --- /dev/null +++ b/ui/components/picklist/newport/_index.scss @@ -0,0 +1,46 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded picklist + * + * @name newport + * @selector .vlocity-newport-combobox-picklist + * @restrict .slds-combobox-picklist + * @variant + */ + +@include deprecate('4.0.0', 'A picklist should use the readonly version of a combobox') { + + .vlocity-newport-combobox-picklist { + [role="combobox"] .slds-input__icon > input[readonly] { + &:focus { + border-color: #FF6D00; //$color-border-brand-primary; + } + } + } +} + + + +.vlocity-newport-combobox_container { + .slds-dropdown { + border-top: none; + border-radius: 0 0 0.25rem 0; + + .slds-listbox__option.slds-has-focus, + .slds-listbox__option:focus, + .slds-listbox__option:hover, + .slds-listbox__option.slds-has-focus, + .slds-listbox__option:focus, + .slds-listbox__option:hover { + background-color: #CCCCCC; + } + } + + [role=combobox] input[readonly]:focus { + border-bottom: 2px solid #FF6D00; + } +} + diff --git a/ui/components/picklist/newport/example.jsx b/ui/components/picklist/newport/example.jsx new file mode 100644 index 0000000000..08e092e501 --- /dev/null +++ b/ui/components/picklist/newport/example.jsx @@ -0,0 +1,215 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import { + ComboboxContainer, + Listbox, + ListboxItem, + Option +} from '../../combobox/newport/example'; +import { ListboxPill } from '../../pills/listbox-of-pill-options/example'; + +/* ----------------------------------------------------------------------------- + Variables +----------------------------------------------------------------------------- */ + +const listboxSelectionsId = 'listbox-selections-unique-id'; +const listboxOptionId00 = 'listbox-option-unique-id-00'; +const listboxOptionId01 = 'listbox-option-unique-id-01'; +const listboxOptionId02 = 'listbox-option-unique-id-02'; +const listboxOptionId03 = 'listbox-option-unique-id-03'; + +/* ----------------------------------------------------------------------------- + Private +----------------------------------------------------------------------------- */ + +const ListboxDropdown = props => ( + + {props.heading ? ( +
  • + +

    + {props.heading} +

    +     +
    • + ) : null} + + + + + + +     +); + +/* ----------------------------------------------------------------------------- + Exports +----------------------------------------------------------------------------- */ + +// Demo wrapper +export const Context = props => ( +
    {props.children}
    +); + +// Default +export default ( + } + readonly + /> +); + +// States +export let states = [ + { + id: 'focused', + label: 'Focused', + element: ( + } + readonly + /> + ), + script: ` + document.getElementById('combobox-unique-id').focus() + ` + }, + { + id: 'open-item-focused', + label: 'Open - Item Focused', + element: ( + } + aria-activedescendant={listboxOptionId01} + readonly + /> + ) + }, + { + id: 'open-option-selected', + label: 'Open - Option Selected', + element: ( + } + readonly + /> + ) + }, + { + id: 'open-options-selected', + label: 'Open - Options Selected', + element: ( + } + readonly + /> + ) + }, + { + id: 'closed-option-selected', + label: 'Closed - Option Selected', + element: ( + } + readonly + /> + ) + }, + { + id: 'closed-options-selected', + label: 'Closed - Options Selected', + element: ( + } + readonly + > + + + + + + + + + + ) + }, + { + id: 'group-heading', + label: 'Group heading label', + element: ( + + } + readonly + /> + ) + } +]; diff --git a/ui/components/progress-bar/newport/_index.scss b/ui/components/progress-bar/newport/_index.scss new file mode 100644 index 0000000000..4807abe589 --- /dev/null +++ b/ui/components/progress-bar/newport/_index.scss @@ -0,0 +1,23 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @name base + * @selector .slds-progress-bar + * @restrict div + * @variant + */ + +/** + * @summary Vlocity Newport branded Progress bar + * + * @name newport + * @selector .vlocity-newport-progress-bar + * @restrict .slds-progress-bar + * @variant + */ +.vlocity-newport-progress-bar { + .slds-progress-bar__value { + background: #FF6D00; + } +} diff --git a/ui/components/progress-bar/newport/example.jsx b/ui/components/progress-bar/newport/example.jsx new file mode 100644 index 0000000000..49e9ee3018 --- /dev/null +++ b/ui/components/progress-bar/newport/example.jsx @@ -0,0 +1,63 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; + +/// /////////////////////////////////////////// +// Partial(s) +/// /////////////////////////////////////////// + +export let NewportProgressBar = props => ( +
    + + Progress: {`${props.value}%`} + +
    +); + +/// /////////////////////////////////////////// +// Export +/// /////////////////////////////////////////// + +export default ; + +export let states = [ + { + id: 'zero', + label: '0% complete', + element: + }, + { + id: '25', + label: '25% complete', + element: + }, + { + id: '50', + label: '50% complete', + element: + }, + { + id: '75', + label: '75% complete', + element: + }, + { + id: '100', + label: '100% complete', + element: + } +]; diff --git a/ui/components/progress-ring/newport/_index.scss b/ui/components/progress-ring/newport/_index.scss new file mode 100644 index 0000000000..d7270a8ef5 --- /dev/null +++ b/ui/components/progress-ring/newport/_index.scss @@ -0,0 +1,48 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded Progress Ring component + * + * @name newport + * @selector .vlocity-newport-progress-ring + * @restrict .slds-progress-ring + * @variant + */ + +.vlocity-newport-progress-ring { + + /** + * + * @selector .slds-progress-ring__path + * @restrict .slds-progress-ring__progress path + */ + .slds-progress-ring__path { + fill: #FF6D00; + } +} + + + +/** + * @summary Complete colors + * + * @selector .slds-progress-ring_complete + * @restrict .slds-progress-ring + * @modifier + * @group theme + */ +.slds-progress-ring_complete { + + .slds-icon { + fill: $color-background-progress-ring-content; + } + + .slds-progress-ring__path { + fill: $color-background-success; + } + + .slds-progress-ring__content { + background: $color-background-success; + } +} diff --git a/ui/components/progress-ring/newport/example.jsx b/ui/components/progress-ring/newport/example.jsx new file mode 100644 index 0000000000..1b7636e5b2 --- /dev/null +++ b/ui/components/progress-ring/newport/example.jsx @@ -0,0 +1,43 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import NewportProgressRing from './'; +import { UtilityIcon } from '../../icons/base/example'; + +export default ; + +export const examples = [ + { + id: 'progress-ring-partially-drained', + label: 'Progress Ring Partially Drained', + element: + }, + { + id: 'progress-ring-warning', + label: 'With Warning Icon', + element: ( + + + + ) + }, + { + id: 'progress-ring-expired', + label: 'With Expired Icon', + element: ( + + + + ) + }, + { + id: 'progress-ring-complete', + label: 'Complete', + element: ( + + + + ) + } +]; diff --git a/ui/components/progress-ring/newport/index.jsx b/ui/components/progress-ring/newport/index.jsx new file mode 100644 index 0000000000..588cfb6454 --- /dev/null +++ b/ui/components/progress-ring/newport/index.jsx @@ -0,0 +1,63 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React, { Component } from 'react'; +import classNames from 'classnames'; + +class NewportProgressRing extends Component { + getCoordinatesForPercent(percent) { + const pct = percent / 100; + const x = Math.cos(2 * Math.PI * pct); + const y = Math.sin(2 * Math.PI * pct); + + return { x, y }; + } + + render() { + const { percent, isWarning, isComplete, isExpired } = this.props; + const { x, y } = this.getCoordinatesForPercent(percent); + const isLong = percent > 50 ? 1 : 0; + let stateClass; + + if (isWarning) stateClass = 'slds-progress-ring_warning'; + if (isExpired) stateClass = 'slds-progress-ring_expired'; + if (isComplete) stateClass = 'slds-progress-ring_complete'; + + return ( +
    +
    + + + +
    + +
    {this.props.children}
    +
    + ); + } +} + +NewportProgressRing.propTypes = { + percent: React.PropTypes.number +}; + +NewportProgressRing.defaultProps = { + percent: 55 +}; + +export default NewportProgressRing; diff --git a/ui/components/publishers/newport/_index.scss b/ui/components/publishers/newport/_index.scss new file mode 100644 index 0000000000..9f905f6860 --- /dev/null +++ b/ui/components/publishers/newport/_index.scss @@ -0,0 +1,18 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +/** + * @summary Vlocity Newport branded publisher + * + * @name newport + * @selector .vlocity-newport-publisher + * @restrict .slds-publisher + * @variant + */ + +.vlocity-newport-publisher { + .slds-publisher__input { + padding-left: $spacing-none; + padding-right: $spacing-x-small; + } +} diff --git a/ui/components/publishers/newport/example.jsx b/ui/components/publishers/newport/example.jsx new file mode 100644 index 0000000000..2efe5ab0f7 --- /dev/null +++ b/ui/components/publishers/newport/example.jsx @@ -0,0 +1,81 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import { ButtonIcon } from '../../button-icons/base/example'; +import { NewportTextarea } from '../../textarea/newport/example'; +import classNames from 'classnames'; + +/// //////////////////////////////////////// +// Partial(s) +/// //////////////////////////////////////// + +const image = ( + + Jenna Davis + +); + +let Publisher = props => ( +
    + + + {props.children} +
    +); + +let PublisherActions = props => ( +
    +
      +
    • + +
      • +
    • + +
      • +
    + +
    +); + +/// //////////////////////////////////////// +// Export +/// //////////////////////////////////////// + +export default ( + + + +); diff --git a/ui/components/select/newport/_index.scss b/ui/components/select/newport/_index.scss new file mode 100644 index 0000000000..b6a8727d3f --- /dev/null +++ b/ui/components/select/newport/_index.scss @@ -0,0 +1,61 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded select + * + * @name newport + * @selector .vlocity-newport-select + * @restrict .slds-select + * @variant + */ + + +.vlocity-newport-select_container { + .vlocity-newport-select { + border: none; + border-bottom: 1px solid #dddbda; + border-radius: 0; + padding: 0; + } + + .vlocity-newport-icon { + position: absolute; + right: 1px; + top: 5px; + + .slds-button__icon { + width: 1.3rem; + height: 1.3rem; + fill: #54698D; + } + } +} + + +.vlocity-newport-select_container:before { + border-bottom: none; + top: 0; +} + +.vlocity-newport-select_container:after { + border-top: none; + bottom: 0; +} + +.vlocity-newport-select:active, +.vlocity-newport-select:focus { + box-shadow: none; + border-color: #FF6D00; +} + + +.slds-has-error .vlocity-newport-select { + border-bottom: 1px solid #c23934; + box-shadow: none; + + &:focus { + box-shadow: none; + } +} \ No newline at end of file diff --git a/ui/components/select/newport/example.jsx b/ui/components/select/newport/example.jsx new file mode 100644 index 0000000000..f9120e22a0 --- /dev/null +++ b/ui/components/select/newport/example.jsx @@ -0,0 +1,163 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; +import SvgIcon from '../../../shared/svg-icon'; + +/// //////////////////////////////////////// +// Partial(s) +/// //////////////////////////////////////// + +let FormElement = props => ( +
    + {props.children} +
    +); + +let FormElementLabel = props => ( + +); + +let FormElementControl = props => ( +
    + {props.children} +
    +); + +export let Select = props => ( +
    + + + + + +
    +); + +/// /////////////////////////////////////////// +// State Constructor(s) +/// /////////////////////////////////////////// + +let Required = props => ( + + + + * + {' '} + Select Label + + + + + +); + +let ErrorState = props => ( + + + + * + {' '} + Select Label + + + + +
    + This field is required +
    +     +); + +let Disabled = props => ( + + Select Label + + + + +); + +let Multiple = props => ( + + Select Label + + + + +); + +/// /////////////////////////////////////////// +// Export +/// /////////////////////////////////////////// + +export default ( + + Select Label + + + + +); + +export let states = [ + { + id: 'select-required', + label: 'Required', + element: + }, + { + id: 'select-error', + label: 'Error', + element: + }, + { + id: 'select-disabled', + label: 'Disabled', + element: + }, + { + id: 'select-multiple', + label: 'Multiple Selection', + element: + } +]; diff --git a/ui/components/textarea/newport/_index.scss b/ui/components/textarea/newport/_index.scss new file mode 100644 index 0000000000..390d50c96b --- /dev/null +++ b/ui/components/textarea/newport/_index.scss @@ -0,0 +1,34 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + + +/** + * @summary Vlocity Newport branded textarea + * + * @name newport + * @selector .vlocity-newport-textarea + * @restrict .slds-textarea + * @variant + */ + +.vlocity-newport-textarea { + border: none; + border-bottom: 1px solid #dddbda; + padding: .5rem 0; + border-radius: 0; + + &:active, + &:focus { + box-shadow: none; + } +} + + +.slds-has-error .vlocity-newport-textarea { + box-shadow: none; + + &:active, + &:focus { + box-shadow: none; + } +} \ No newline at end of file diff --git a/ui/components/textarea/newport/example.jsx b/ui/components/textarea/newport/example.jsx new file mode 100644 index 0000000000..be4193e2a7 --- /dev/null +++ b/ui/components/textarea/newport/example.jsx @@ -0,0 +1,128 @@ +// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved +// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license + +import React from 'react'; +import classNames from 'classnames'; + +const textareaId = 'newport-textarea-id-01'; + +/// //////////////////////////////////////// +// Partial(s) +/// //////////////////////////////////////// + +export let FormElement = props => ( +
    + {props.children} +
    +); + +export let FormElementLabel = props => ( + +); + +export let FormElementControl = props => ( +
    + {props.children} +
    +); + +export let NewportTextarea = props => ( +