Merge pull request #73 from otto-de/beta

Release: Table Accordion and Card Components

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.3.3-beta.1](https://github.com/otto-de/b2b-design-system/compare/v1.3.2...v1.3.3-beta.1) (2023-06-08)
+
+
+### Bug Fixes
+
+* implement feedback from design sign off ([8e64a07](https://github.com/otto-de/b2b-design-system/commit/8e64a07604e455edb8789d66abd05e4f8ce38db2))
+
 ## [1.3.2](https://github.com/otto-de/b2b-design-system/compare/v1.3.1...v1.3.2) (2023-06-07)
 
 

packages/core-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.1",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "build:storybook": "npm run copy-md-files && build-storybook -o docs-build/design-system"
   },
   "dependencies": {
-    "@otto-de/b2b-tokens": "1.3.2",
+    "@otto-de/b2b-tokens": "1.3.3-beta.1",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^3.0.1"
   },

packages/core-components/src/components/card/card.scss

@@ -26,8 +26,14 @@
 :host(.b2b-card:hover),
 :host(.b2b-card:focus) {
   box-shadow: 5px 5px var(--b2b-size-15) rgba(#0000, 0.15);
-  outline: none;
   transition: box-shadow 0.2s ease-in-out;
+  outline: none;
+}
+
+:host(.b2b-card:focus) {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+  z-index: 9999;
 }
 
 :host(.b2b-card--disabled) {

packages/core-components/src/components/dropdown/dropdown.scss

@@ -74,7 +74,7 @@
 
 :host(.b2b-dropdown--disabled) {
   .b2b-dropdown-select {
-    background-image: none;
+    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="grey" viewBox="0 0 32 32"><path d="M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z"/></svg>');
     background-color: var(--b2b-color-grey-25);
     color: var(--b2b-color-grey-250);
     border-color: var(--b2b-color-grey-200);

packages/core-components/src/components/search/search.stories.tsx

@@ -26,7 +26,6 @@ const Template: Story = ({ placeholder, optionsList, disabled }) => {
   // it also works when the component has the word 'input' in its name
   return html`<div style="width: 300px; display: block">
     <b2b-search
-      contenteditable
       data-testid="search-element"
       disabled=${disabled}
       placeholder="${placeholder}"

packages/core-components/src/components/table/table-row/table-row.scss

@@ -34,10 +34,6 @@
   background-color: inherit;
 }
 
-:host(.b2b-table-row__accordion-parent) {
-  background-color: var(--b2b-color-grey-50);
-}
-
 /* purgecss start ignore */
 :host(.b2b-table-row--highlight:hover) {
   background-color: var(--b2b-color-table-hover);
@@ -63,4 +59,11 @@
   }
 }
 
+.b2b-table-header--control-cell {
+  /* For equal width the control cell will automatically grow.
+  We should fix the size and this size
+   */
+  max-width: 44px;
+}
+
 /* purgecss end ignore */

packages/core-components/src/components/table/table-row/table-row.tsx

@@ -7,15 +7,18 @@ import {
   EventEmitter,
   Method,
   State,
+  Element,
 } from '@stencil/core';
-import { TableRowTypes, TableColourOptions } from '../types';
+import { TableRowTypes, TableColourOptions, TableSizes } from '../types';
 
 @Component({
   tag: 'b2b-table-row',
   styleUrl: 'table-row.scss',
   shadow: true,
 })
 export class TableRowComponent {
+  @Element() hostElement: HTMLB2bTableRowElement;
+
   /** Whether the row will be highlighted on mouse over **/
   @Prop() highlight: boolean = true;
 
@@ -43,14 +46,35 @@ export class TableRowComponent {
     this.b2bOpen.emit(isOpen);
   }
 
+  private getRowColor = () => {
+    if (this.type === TableRowTypes.PARENT) return TableColourOptions.GROUP;
+    return this.color;
+  };
+
+  private getParentTableSize = () => {
+    const parentTable = this.hostElement.closest('b2b-table');
+    return parentTable.getAttribute('size');
+  };
+
+  // This is needed for table size equal, so that control cell size remains as big
+  // as the elements it contains. Feel free to improve this
+  private getRowWidthForEqualSize = () => {
+    const accordionIconSize = '24px';
+    if (this.getParentTableSize() === TableSizes.EQUAL) {
+      return accordionIconSize;
+      // TODO: in B2BDS-166 selectable row - if table is selectable return size of checkbox
+      // TODO: in B2BDS-166 selectable row -if cell is selectable and accordion return size of both
+    }
+  };
+
   render() {
+    console.log(this.getRowWidthForEqualSize());
     return (
       <Host
         class={{
           'b2b-table-row': true,
-          'b2b-table-row__accordion-parent': this.type === TableRowTypes.PARENT,
           ['b2b-table-row--highlight']: this.highlight,
-          [`b2b-table-row--color-${this.color}`]: true,
+          [`b2b-table-row--color-${this.getRowColor()}`]: true,
         }}
         role="row">
         {this.type === TableRowTypes.PARENT && (
@@ -67,7 +91,10 @@ export class TableRowComponent {
         )}
         {this.type === TableRowTypes.CHILD && <b2b-table-cell></b2b-table-cell>}
         {this.type === TableRowTypes.HEADER && (
-          <b2b-table-header></b2b-table-header>
+          <b2b-table-header
+            style={{
+              ['width']: this.getRowWidthForEqualSize(),
+            }}></b2b-table-header>
         )}
         <slot></slot>
       </Host>

packages/core-components/src/components/table/types.ts

@@ -36,4 +36,9 @@ export const TableRowTypes = {
 export type TableRowTypes =
   (typeof TableRowTypes)[keyof typeof TableRowTypes];
 
+export const TableColourOptions = {
+  DEFAULT: 'default',
+  SELECTED: 'selected',
+  GROUP: 'group'
+} as const;
 export type TableColourOptions = 'default' | 'selected' | 'group';

packages/core-components/src/html/content.html

@@ -30,7 +30,7 @@
       <br />
       <!--  Parent can control size of table when table has size: expand-->
       <div style="width: 700px">
-        <b2b-table size="expand">
+        <b2b-table size="equal">
           <b2b-table-rowgroup type="header" accordion>
             <b2b-table-row>
               <b2b-table-header>Title 1</b2b-table-header>

packages/core-components/src/html/form.html

@@ -72,6 +72,7 @@
             <li>Item 5</li>
           </ul></b2b-search
         >
+        <br />
         <b2b-search id="search-bar" placeholder="search here"></b2b-search>
         <script>
           const searchElement = document.getElementById('search-bar');
@@ -133,6 +134,11 @@
           ];
         </script>
       </div>
+
+      <b2b-headline size="200">Search Disabled</b2b-headline>
+      <div style="width: 40%">
+        <b2b-search placeholder="search disabled" disabled></b2b-search>
+      </div>
     </div>
 
     <div class="content-container">

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-react-components",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.1",
   "description": "B2B React components wrapper",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "tsc": "tsc -p ."
   },
   "dependencies": {
-    "@otto-de/b2b-core-components": "1.3.2"
+    "@otto-de/b2b-core-components": "1.3.3-beta.1"
   },
   "devDependencies": {
     "@types/node": "^18.16.0",

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-tokens",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.1",
   "description": "B2B Design Tokens",
   "author": "Otto GmbH",
   "license": "Apache-2.0",