Orange-OpenSource
ODS-Component - Card
Card
Requirement
As a developer I want to insert a card So That I will get this ready to use component compatible with Orange design specifications and a11y requirements
General description
Cards are a contained and independent element that can display content and actions on a single topic.
UI specifications
Anatomy
Cards can contain a number of elements which are optional.
- Media (optional)
- Card title
- Subtitle (optional)
- Supporting text (optional)
- Buttons and actions (optional)
Variants
There are two different card sizes; small and large. A large card is a full width portrait mobile screen and a small card for a two column portrait mobile screen display.
Card Small
Half page width on vertical mobile screen
Card Image First
Full page width on vertical mobile screen
Card Title First
Full page width on vertical mobile screen
Card Image Side
States
- xx
- xx
- xx
- xx
Internationalization
xxx
Appearance
There are a few ways cards can be presented. With a single title on its own for a simple card view, or with more information shown in a subtitle and supplemental text and actions at the bottom of the card.
The visual style for cards is a simplified physical metaphor which benefits from the use of rounded corners and drop shadow to help convey the metaphor. This is the default style that should be used for cards.
The corner radius and drop shadow used, replicate cards used in native iOS applications, in order that user's will recognise and be familiar with how cards work. The corner radius and drop shadow used should therefore not be adjusted or changed.
Behavior
TO DO Transitions - scroll - pop
Buttons & Actions
Primary action
The primary action area of a card is the card itself. A card can act as a single touch target which leads to a detail view screen on a single subject.
Secondary actions
Secondary actions are represented by buttons, icons and UI controls on cards. Actions should typically be placed at the bottom of the card. There is no limit to the number of actions that can be added to a card, however, an overflow button is recommended for multiple action items.
Add a recomendation of using one line for all uttons and icons
Buttons
They Stand on the Left.
Action icons
They would stand on the right.
Title and subtitles (Draft)
Titles should be short and to the point. Title text should appear on one line. Longer titles should be truncated or use a timed scrolling mechanism.
Supporting text (Draft)
TBD - Maximum size, scrolling or fixed?
Right to left languages
the card would show the card in the exact opposit do we also need to flip the images? or use the image internationalization
Placement
xxx
UX specifications
Interaction
- All:
- When there is not button or action, the entire card is selectable to activate the card action (ie: link to a new page)
- When there are buttons or actions, only the item can be selectable (ie: the card could have multiple actions associated to it. each could have a dedicated action)
- Touch:
- No dedicated behavior identified
- Keyboard:
- No dedicated behavior identified
Animations
- None identified
Accessibility
Dynamic text styles
the objective is to see how the card adapts to higher font sizes
- The image description needs to be provided
Color
The support of collors have been made accessible using the Orange color palette
Talk back
The card creation will propose to group the Title, Subtitle & Text in the same time. (this is possible on android and not on iOS)
- iOS: https://a11y-guidelines.orange.com/fr/mobile/ios/developpement/#grouper-des-elements
- Android: For the image, as it is decorative there is no need to provide a alt text description
Technical specifications
Demo App Specifics
In the Demo App the card page will allow the user to select from all optional items to build a dedicated card so that:
- the user can select between car types (only one card type is selectable at once)
- (radio button) Small
- (radio button) Image First
- (radio button) Title First
- (radio button) Side by side // when this will be available
- the user can select fro the cards other options
- [Check box] Media
- [Check box] Subtitle
- [Check box] Text
- [Check box] Button
- [Check box] Actions
About the interactions on the page:
- When the Small card type is selected, the items Subtitle, Text, Buttons, Actions should be unavailable and grayed out
- When the Large card is selected all optional items are available
Implementation tasks
- [x] #32
- [x] #33
- [x] #34
- [x] #35
- [x] #62
IMHO This issue shouldn't be in the sprints projects. Only its sub-tasks should be in the project. Otherwise, this one will be in progress for a long time :)
