diff --git a/__tests__/components/__snapshots__/Card.test.js.snap b/__tests__/components/__snapshots__/Card.test.js.snap index 23d6cc5..5d14fa6 100644 --- a/__tests__/components/__snapshots__/Card.test.js.snap +++ b/__tests__/components/__snapshots__/Card.test.js.snap @@ -1,77 +1,91 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Card Rendering Render the Card component with default props 1`] = ` - - - Add Host record - - +
+ + Add Host record + +
+
+ +
+ + `; exports[`Card Rendering Render the Card component with props 1`] = ` - - - Add Host Record - - - Add a host record on BAM - - - - - Path - - - + + Add Host Record + + + Add a host record on BAM + + +
- Host Record - - - + +
+ + `; exports[`Card Rendering Render the Card component with pseudo translated text 1`] = ` - - - Add Host Record - - - Add a host record on BAM - - - - - Pââth - - - + + Add Host Record + + + Add a host record on BAM + + +
- Host Record - - - + +
+ + `; diff --git a/src/components/Card.js b/src/components/Card.js index 5138173..1194916 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -20,7 +20,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ import PropTypes from 'prop-types'; -import { t } from '@bluecateng/l10n.macro'; +import { Layer } from '@bluecateng/pelagos'; +import { ArrowRight } from '@carbon/icons-react'; import './Card.less'; /** @@ -28,32 +29,21 @@ import './Card.less'; * with some data to fill it up with. */ -const Card = ({ title, href, description, path, className }) => { - function getFullPath() { - let fullPath = ''; - path.forEach((pathSection, index) => { - if (index === path.length - 1) { - fullPath = fullPath.concat(String(pathSection)); - } else { - fullPath = fullPath.concat(String(pathSection), '/'); - } - }); - return fullPath; - } - +const Card = ({ title, href, description, className }) => { return ( - - {title} - {description ? ( - {description} - ) : null} - {path ? ( - - {t`Path`} - {getFullPath()} - - ) : null} - + + +
+ {title} + {description && ( + {description} + )} +
+
+ +
+ + ); }; @@ -67,9 +57,6 @@ Card.propTypes = { /** Description inside in the card */ description: PropTypes.string, - /** Group to which the card belongs to */ - path: PropTypes.arrayOf(PropTypes.string), - /** The component class name(s). */ className: PropTypes.string, }; diff --git a/src/components/Card.less b/src/components/Card.less index d6559d5..f88ac4c 100644 --- a/src/components/Card.less +++ b/src/components/Card.less @@ -21,63 +21,52 @@ @import '~@bluecateng/pelagos/less/fonts'; .Card { - display: flex; - flex-direction: column; - gap: @sp-08; - background-color: var(--layer-01); - width: 272px; - height: 150px; padding: @sp-16; - text-decoration: none; + background-color: var(--layer); + + &__link { + text-decoration: none; + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-between; + } &__title { - color: var(--link-primary); - font-size: @sp-16; + @heading-01(); line-height: @sp-32; width: 184px; text-align: left; - text-decoration: underline; + text-decoration: none; + margin-bottom: @sp-08; + color: var(--text-primary); } &__description { display: -webkit-box; - -webkit-line-clamp: 2; + -webkit-line-clamp: 3; -webkit-box-orient: vertical; - color: var(--text-placeholder); - font-size: @sp-12; - line-height: @sp-16; - max-width: 235px; + @body-01(); text-align: left; text-overflow: ellipsis; overflow: hidden; + margin-bottom: @sp-16; + color: var(--text-primary); } - &:hover { - background-color: var(--layer-hover-01); - outline: 1.5px solid var(--border-interactive); - box-shadow: 0 0 5px @sp-02 var(--border-subtle-selected-01); - text-decoration: none; - .Card__title { - color: var(--link-primary-hover); - } - } - &:active { - background-color: var(--layer-active-01); + &__arrowRight { + color: var(--icon-interactive); } - &__path { - display: block; - color: var(--text-primary); - font-size: @sp-16; - line-height: @sp-24; - text-align: left; + &__iconContainer { + display: flex; + align-items: end; } - &__pathTitle { - display: block; - color: var(--text-secondary); - font-size: @sp-12; - line-height: @sp-16; - text-align: left; + &:hover { + background-color: var(--layer-hover); + } + &:active { + background-color: var(--layer-active); } } diff --git a/src/l10n/en.po b/src/l10n/en.po index 9fa3c8c..3e8d380 100644 --- a/src/l10n/en.po +++ b/src/l10n/en.po @@ -81,8 +81,8 @@ msgid "Notification" msgstr "" #: 519e -msgid "Path" -msgstr "" +#~ msgid "Path" +#~ msgstr "" #: efc0 msgid "Save" diff --git a/src/l10n/zz.po b/src/l10n/zz.po index dc57847..1fe97ab 100644 --- a/src/l10n/zz.po +++ b/src/l10n/zz.po @@ -81,8 +81,8 @@ msgid "Notification" msgstr "Nôôtîîfîîççââtîîôôn" #: 519e -msgid "Path" -msgstr "Pââth" +#~ msgid "Path" +#~ msgstr "Pââth" #: efc0 msgid "Save" diff --git a/stories/Card.stories.js b/stories/Card.stories.js index 5f5af38..9f6a010 100644 --- a/stories/Card.stories.js +++ b/stories/Card.stories.js @@ -24,13 +24,19 @@ import { Card } from '/src'; export default { title: 'Components/Card', component: Card, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export const Normal = { args: { title: 'Add user', href: '#', - description: 'API to add an Object', - path: ['parent', 'API'], + description: 'Add an user to the application', }, };